<template>
    <div>
        <div id="title">
            <div class="little" @touchstart="atnClick" ref="one">狗狗</div>
            <div class="little" @touchstart="btnClick" ref="two">猫猫</div>
            <div class="little" @touchstart="ctnClick" ref="three">小宠</div>
            <div class="little" @touchstart="dtnClick" ref="four">水族</div>
        </div>
        <div id="main">
            <keep-alive>
                <whw :is="type"></whw>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import One from "./One.vue"
import Two from "./Two.vue"
import Three from "./Three.vue"
import Four from "./Four.vue"
export default {
    data: function() {
        return {
            type: "One"
        }
    },
    mounted:function(){
             this.$refs.one.style.border = "solid 1px #dbdbdb"
            this.$refs.one.style.borderBottom = "none"
            this.$refs.two.style.border = "none"
            this.$refs.two.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.three.style.border = "none"
             this.$refs.three.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.four.style.border = "none"
             this.$refs.four.style.borderBottom = "solid 1px #dbdbdb"
    },
    methods: {
        atnClick: function() {
            this.type = "One",
            this.$refs.one.style.border = "solid 1px #dbdbdb"
            this.$refs.one.style.borderBottom = "none"
            this.$refs.two.style.border = "none"
            this.$refs.two.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.three.style.border = "none"
             this.$refs.three.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.four.style.border = "none"
             this.$refs.four.style.borderBottom = "solid 1px #dbdbdb"
        },
        btnClick: function() {
            this.type = "Two"
            this.$refs.two.style.border = "solid 1px #dbdbdb"
            this.$refs.two.style.borderBottom = "none"
            this.$refs.one.style.border = "none"
             this.$refs.one.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.three.style.border = "none"
             this.$refs.three.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.four.style.border = "none"
             this.$refs.four.style.borderBottom = "solid 1px #dbdbdb"
        },
        ctnClick: function() {
            this.type = "Three"
            this.$refs.three.style.border = "solid 1px #dbdbdb"
            this.$refs.three.style.borderBottom = "none"
            this.$refs.one.style.border = "none"
             this.$refs.one.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.two.style.border = "none"
             this.$refs.two.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.four.style.border = "none"
             this.$refs.four.style.borderBottom = "solid 1px #dbdbdb"
        },
        dtnClick: function() {
            this.type = "Four"
            this.$refs.four.style.border = "solid 1px #dbdbdb"
            this.$refs.four.style.borderBottom = "none"
            this.$refs.one.style.border = "none"
             this.$refs.one.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.two.style.border = "none"
             this.$refs.two.style.borderBottom = "solid 1px #dbdbdb"
            this.$refs.three.style.border = "none"
             this.$refs.three.style.borderBottom = "solid 1px #dbdbdb"
        }
    },
    components: {
        One,
        Two,
        Three,
        Four

    }
}
</script>

<style scoped>
#title {
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 7vh;
    background-color: #f0f0f0;
}

.little {
    width: 25%;
    height: 7vh;
    border-bottom: solid 1px #dbdbdb;
    text-align: center;
    line-height: 7vh;
}


</style>